<template>
    <div id="quiz">
        <!-- <home-container :metaId="this.bsr.id" bgType="question-bg"> -->
        <div class="title-wrap">
            <div class="title-text">
                <img src="../../assets/img/quize.png" alt="">
                <span style="margin:0 5px;">{{question.name}}</span>
            </div>
            <div class="title-btns">
                <img src="../../assets/img/mini-w.png" @click="$electron.ipcRenderer.send('resource-window-minimize',{metaId:bsr.id})" alt="" />
                <img src="../../assets/img/close-w.png" @click="$electron.ipcRenderer.send('close-resource-window',{metaId:bsr.id})" alt="" />
            </div>
        </div>

            <div class="question align-between" style="-webkit-app-region: no-drag;" ref="question">
                <div class="question-index s-24">{{`${currentQuestion +1} / ${questionNum}`}}</div>
                <div class="question-container align-center">
                    <div class="question-title" :style="`font-size:${zoomArry[currentQuestion].titleSize}px`" ref="title">
                        {{question.topic}}
                    </div>
                    <img src="../../assets/img/last.png" class=" pointer" style="width:52px;height:94px;position: absolute;left:5.73vw;top:46.57%" :style="currentQuestion>0?' ':'visibility: hidden;'" @click="prevQuestion" alt="" />
                    <img src="../../assets/img/next.png" class=" pointer" style="width:52px;height:94px;position: absolute;right:5.73vw;top:46.57%" :style="currentQuestion<(questionArry.length-1)?'':'visibility: hidden;'" @click="nextQuestion" alt="" />
                    <div class="answer-options">
                        <!-- //选择题 -->
                        <div v-if="question.quiz_type===0" style="width:100%" class="selectQuestion">
                            <div v-if="question.answerType==='IMG'" ref="imgAnwserContainer" class="img-anwser-container flex-center">
                                <div ref="scaleContainer" class="scale-container flex-center" :style="`transform: scale(${scale},${scale})`">
                                    <div class="img-answer pointer" v-for="(item,index) in question.answerOptions" :key="item" @click="changeAnswer(index)">
                                        <img class="answerImg" :src="item" alt="">
                                        <div class="answerText">{{question.options[index]}}</div>
                                        <div class="current-answer pointer flex-center" v-if="answer[currentQuestion]===index">
                                            <img src="../../assets/img/current-answer.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="text-container align-center" ref="answer">
                                <div ref="wordSpace" :class="['pointer','text-answer',{'answer-active':answer[currentQuestion]===index}]" v-for="(item, index) in question.answerOptions" :key="index" @click="changeAnswer(index)">
                                    <div class="text-content  pointer" :ref="`textContent${index}`" :style="`font-size:${zoomArry[currentQuestion].textSize}px`">
                                        <span>{{options[index]}}.&nbsp;&nbsp;</span>
                                        <span>{{item}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- //判断题 -->
                        <div v-if="question.quiz_type===1" class="flex-center judgeQuestion" >
                            <div :class="['judge','pointer','flex-center',{'judge-active':answer[currentQuestion]===0}]" @click="changeAnswer(0)">
                                <img src="../../assets/img/active-right.png" alt="" v-if="answer[currentQuestion]===0">
                                <img src="../../assets/img/right.png" alt="" v-else>
                                
                            </div>
                            <div :class="['judge','pointer','flex-center',{'judge-active':answer[currentQuestion]===1}]" @click="changeAnswer(1)">
                                <img src="../../assets/img/active-error.png" alt="" v-if="answer[currentQuestion]===1 ">
                                <img src="../../assets/img/error.png" alt="" v-else>
                            </div>
                        </div>
                        <!-- //连线题 -->
                        <div v-if="question.quiz_type===3">
                            <div class="ligature_box" :class="[question.num ===3 ? 'threeRow' : 'twoRow']">
                                <div class="options_one"  :class="[question.options_one_Type === 'IMG' ?  (question.options_one.length ===3 ? 'threePic' : 'twoPic' ): ('length'+ question.options_one.length)]">
                                    <div class="option" v-for="(item,index) in question.options_one" :id="'left_'+index" name="source" :key="index">
                                        <div v-if="question.options_one_Type === 'IMG'" class="optionsImg"><img   :src="item" alt=""></div>
                                        <div v-else class="optionsText" ><span>{{item}}</span></div>
                                    </div>
                                </div>
                                <div class="options_two" :class="[question.options_two_Type === 'IMG' ?  (question.num >=3 ? (question.options_two.length ===3 ? 'threePic centerImg' : 'twoPic centerImg') : (question.options_two.length ===3 ? 'threePic rightImg' : 'twoPic rightImg')): ('length'+ question.options_two.length)]">
                                    <div class="option" v-for="(item,index) in question.options_two" :id="'center_'+index" name="center" :key="index">
                                        <div v-if="question.options_two_Type === 'IMG'" class="optionsImg" ><img :src="item" alt="" ></div>
                                        <div v-else class="optionsText" ><span>{{item}}</span></div>
                                    </div>
                                </div>
                                <div class="options_three" v-if="question.num >=3" :class="[question.options_three_Type === 'IMG' ?  (question.options_three.length ===3 ? 'threePic rightImg' : 'twoPic rightImg' ): ('length'+ question.options_three.length)]">
                                    <div class="option" v-for="(item,index) in question.options_three" :id="'right_'+index" name="right" :key="index">
                                        <div v-if="question.options_three_Type === 'IMG'" class="optionsImg"><img   :src="item" alt=""></div>
                                        <div v-else class="optionsText" ><span>{{item}}</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="submit-btn pointer" @click="submit" :style="question.quiz_type!==3 ? 'margin-bottom:5vh' : ''" ref="submitBtn">提交</div>
            </div>
            
            <div>
                <div :class="['quize-tool']" ref="quizeTool" >
                    <div class="quize-tool-container align-center">
                        <el-tooltip class="item" effect="light" v-if="question.quiz_type!==3" content="竞赛双人模式" >
                            <img class="pointer" src="../../assets/img/championship.png" alt="" @click="championship('2')">
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" v-if="question.quiz_type!==3" content="竞赛三人模式" >
                            <img class="pointer" src="../../assets/img/quiz/threePeople.png" alt="" @click="championship('3')">
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" content="放大题目" :placement="toolDirction==='right'?'left':'right'">
                            <img class="pointer" src="../../assets/img/quize-zoom-in.png" alt="" @click="zoomIn">
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" content="缩小题目" :placement="toolDirction==='right'?'left':'right'">
                            <img class="pointer" src="../../assets/img/quize-zoom-out.png" alt="" @click="zoomOut">
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" content="关闭" >
                            <img class="pointer" src="../../assets/img/quize-close.png" alt="" @click="$electron.ipcRenderer.send('close-resource-window',{metaId:bsr.id})">
                        </el-tooltip>
                        <div class="pointer flex-center commitBtn" @click="submit">提交</div>
                    </div>
                </div>
            </div>
        <!-- </home-container> -->
        <div class="showTips flex-center" @click="closeTips" v-if="showTips">
            <img src="../../assets/img/right-img.png"  v-if="isRight " alt="">
            <img src="../../assets/img/right-img2.png" v-if="lineisRight" alt="">
            <img src="../../assets/img/error-img.png"  v-if="!isRight && !lineisRight" alt="">
        </div>
    </div>
</template>
<script>
import homeContainer from '../../components/background'
import mixin from '../../mixin/mixin'
export default {
    mixins: [mixin],
    name: "Quiz",
    components: { homeContainer },
    data() {
        return {
            toolDirction: 'right',
            currentQuestion: 0,
            questionArry: [],
            answer: [],
            options: ['A', 'B', 'C', 'D'],
            textSize: 34,
            titleSize: 45,
            signHeightSize: 0,
            signLowTitleSize: 0,
            signLowTextSize: 0,
            maxIndex: 0,
            containerHeight: 0,
            zoomArry: [],
            isRight: true,
            showTips: false,
            scale: 1,
            maxScale: 1,
            jsPlumb: null,
            jsPlumb_Two: null,
            jsPlumb_Three:null,
            jsPlumb_Four:null,
            tempjsPlumb:[],
            tempjsPlumb_Two:[],
            lineRelation:[],
            active: false,
            rightNum:0,
            lineisRight:false,
        }
    },
    watch:{
    },
    created() {
        let canUsewidth = document.documentElement.getBoundingClientRect().width
        if (canUsewidth < 1920 && canUsewidth > 1440) {
            this.titleSize = 38
            this.textSize = 24
        } else if (canUsewidth <= 1440) {
            this.titleSize = 34
            this.textSize = 20
        }
        this.bsr.entries.forEach((v, i) => {
            this.$set(this.zoomArry, i, { textSize: this.textSize, titleSize: this.titleSize, height: '' })
        })
        this.signSize = this.titleSize + 18
        this.signLowTitleSize = this.titleSize
        this.signLowTextSize = this.textSize
        this.formatEntries()
    },
    mounted() {
        this.containerHeight = this.$refs.question.getBoundingClientRect().height
        this.answerSizeRange = document.documentElement.getBoundingClientRect().height - this.$refs.question.getBoundingClientRect().bottom + 20
        this.setImgMaxScale()
        console.log(this.questionArry);
    },
    computed: {
        question() {
            if (this.questionArry[this.currentQuestion].quiz_type === 3 && this.currentQuestion ===0) {
                console.log(this.currentQuestion);
                setTimeout(() => {
                    this.startLine()
                }, 100);
            }
            return this.questionArry[this.currentQuestion]
        },
        questionNum() {
            if(this.bsr && this.bsr.entries){
                return this.bsr.entries.length
            }
            return 0
        },
    },
    methods: {
        showToolkit () {
            this.active = !this.active
        },
        showPlumb(){
            this.jsPlumb = this.$jsPlumb.getInstance({
                Container: 'container', // 选择器id
                EndpointStyle: {radius: 0.11, fill: '',endpoint: 'Dot',strokeWidth: 2,}, // 端点样式
                PaintStyle: {stroke: '#D6D6D6', strokeWidth: 4,length:30}, // 绘画样式，默认8px线宽  #456
                HoverPaintStyle: {stroke: '#67C23A', strokeWidth: 5 }, // 默认悬停样式  默认为null
                ConnectionOverlays: [ // 此处可以设置所有箭头的样式
                    ['Label', { // 设置参数可以参考中文文档
                        // location: 1,
                        // length: 15,
                        // paintStyle: {
                        //     stroke: '#00ADF9',
                        //     fill: '#00ADF9'
                        // }
                    }]
                ],
                Connector: ['Straight'], // 要使用的默认连接器的类型：直线，折线，曲线等
                DrapOptions: {cursor: 'crosshair', zIndex: 2000}
            });
            var Index = this.currentQuestion+1
            console.log('第'+Index+'题是连线题');
            console.log(this.questionArry[this.currentQuestion]);
            this.jsPlumb.batch(() => {
                this.questionArry[this.currentQuestion].options_one.forEach((item,index)=>{
                    this.initLine('left_'+index,'source')
                })
                this.questionArry[this.currentQuestion].options_two.forEach((item,index)=>{
                    this.initLine('center_'+index,'center')
                })
            })
            this.setjsPlumb(true,true);
            //点击连线
            this.jsPlumb.bind('click',  (conn, originalEvent) => {
                console.log(conn);
                // this.jsPlumb.deleteConnection(conn) //删除连接线
            })
            // 当链接建立前
            this.jsPlumb.bind('beforeDrop', (conn, originalEvent) => {
                console.log(conn);
                var count = 0
                this.questionArry[this.currentQuestion].lineRelation.forEach(item=>{
                    if((conn.sourceId === item.start && conn.targetId === item.end) || (conn.sourceId === item.end && conn.targetId === item.start)) {
                        count++
                    }
                })
                if (count === 1) {
                    return true // 链接会自动建立
                }else{
                    this.$message.warning('连线错误，再试试吧')
                    return true
                }
                
            })
            //连线时触发
            this.jsPlumb.bind('connection',  (conn, originalEvent) => {
                var connection = this.jsPlumb.getAllConnections()
                console.log(connection);  
                connection.map(index=>{
                    this.questionArry[this.currentQuestion].lineRelation.forEach(item=>{
                        if ((index.sourceId === item.start &&  index.targetId === item.end) || (index.sourceId === item.end &&  index.targetId === item.start)) {
                            index.setPaintStyle({ stroke: '#67C23A',strokeWidth: 4,length:30})
                        }
                    })
                })
                console.log(conn.sourceId)
                console.log(conn.targetId)
            })
            this.jsPlumb.bind('connectionDragStop' , (conn,originalEvent) =>{
                var num = 0
                this.questionArry[this.currentQuestion].lineRelation.forEach(line=>{
                    if ((line.start === conn.sourceId && line.end === conn.targetId) || (line.end === conn.sourceId && line.start === conn.targetId)) {
                        num = 1
                    }
                })
                console.log(num);
                if (num === 0) {
                    conn.setPaintStyle({ stroke: 'red',strokeWidth: 4,length:30})
                    setTimeout(() => {
                        this.jsPlumb.deleteConnection(conn) 
                    }, 2000);
                }
            })
            //右键触发
            this.jsPlumb.bind('contextmenu',  (conn, originalEvent) => {
                console.log(conn, originalEvent)
            })
        },
        showPlumb_Two(){
            // if (this.questionArry[this.currentQuestion].num !== 3) {
            //     console.log('不是三列');
            //     return
            // }
            this.jsPlumb_Two = this.$jsPlumb.getInstance({
                Container: 'container_Two', // 选择器id
                EndpointStyle: {radius: 0.2, fill: '',endpoint: 'Dot',strokeWidth: 2,}, // 端点样式
                PaintStyle: {stroke: '#D6D6D6', strokeWidth: 4}, // 绘画样式，默认8px线宽  #456
                HoverPaintStyle: {stroke: '#67C23A', strokeWidth: 5 }, // 默认悬停样式  默认为null
                ConnectionOverlays: [ // 此处可以设置所有箭头的样式
                    ['Label', { // 设置参数可以参考中文文档
                        // location: 1,
                        // length: 12,
                        // paintStyle: {
                        //     stroke: '#00ADF9',
                        //     fill: '#00ADF9'
                        // }
                    }]
                ],
            Connector: ['Straight'], // 要使用的默认连接器的类型：直线，折线，曲线等
            DrapOptions: {cursor: 'crosshair', zIndex: 2000}
            });
    
            this.jsPlumb_Two.batch(() => {
                this.questionArry[this.currentQuestion].options_two.forEach((item,index)=>{
                    this.initLine_Two('center_' + index,'center')
                })
                this.questionArry[this.currentQuestion].options_three.forEach((item,index)=>{
                    this.initLine_Two('right_' + index,'right')
                })
            })
            this.setjsPlumb_Two(true,true);

            this.jsPlumb_Two.bind('beforeDrop', (conn, originalEvent) => {
                console.log(conn);
                var count = 0
                this.questionArry[this.currentQuestion].lineRelation.forEach(item=>{
                    if((conn.sourceId === item.start && conn.targetId === item.end) || (conn.sourceId === item.end && conn.targetId === item.start)) {
                        count++
                    }
                })
                if (count === 1) {
                    return true // 链接会自动建立
                }else{
                    this.$message.warning('连线错误，再试试吧')
                    return true
                }  
            })

            //点击连线
            this.jsPlumb_Two.bind('click',  (conn, originalEvent) => {
                // console.log('line2');
                // this.jsPlumb_Two.deleteConnection(conn)
                console.log(conn, originalEvent)
            })

            //连线时触发
            this.jsPlumb_Two.bind('connection',  (conn, originalEvent) => {
                var connection = this.jsPlumb_Two.getAllConnections()
                // console.log(connection);  
                connection.map(index=>{
                    this.questionArry[this.currentQuestion].lineRelation.forEach(item=>{
                        if ((index.sourceId === item.start &&  index.targetId === item.end) || (index.sourceId === item.end &&  index.targetId === item.start))  {
                            index.setPaintStyle({ stroke: '#67C23A',strokeWidth: 4,length:30})
                        } 
                    })
                })
                console.log(conn.sourceId)
                console.log(conn.targetId)
            })

            this.jsPlumb_Two.bind('connectionDragStop' , (conn,originalEvent) =>{
                var rightnum = 0
                this.questionArry[this.currentQuestion].lineRelation.forEach(line=>{
                    if ((line.start === conn.sourceId && line.end === conn.targetId) || (line.end === conn.sourceId && line.start === conn.targetId))  {
                        rightnum = 1
                    }
                })
                if (rightnum === 0) {
                    conn.setPaintStyle({ stroke: 'red',strokeWidth: 4,length:30})
                    setTimeout(() => {
                        this.jsPlumb_Two.deleteConnection(conn) 
                    }, 2000);
                }
            })

            //右键触发
            this.jsPlumb_Two.bind('contextmenu',  (conn, originalEvent) => {
                console.log(conn, originalEvent)
            })
        },
        initLine(id, type) {
            const ins = this.jsPlumb;
            const elem = document.getElementById(id);
            if (type === 'source') {
                ins.makeSource(elem, {
                    anchor: [1, 0.5, 0, 0],
                    allowLoopback: true,
                    maxConnections: -1
                })
                ins.makeTarget(elem, {
                    anchor: [1, 0.5, 0, 0], // 左 上 右 下
                    allowLoopback: true, //允许回连
                    maxConnections: -1 //最大连接数（-1表示不限制）
                })
            } else {
                ins.makeSource(elem, {
                    anchor: [0, 0.5, 0, 0],
                    allowLoopback: true,
                    maxConnections: -1
                })
                ins.makeTarget(elem, {
                    anchor: [0, 0.5, 0, 0], // 左 上 右 下
                    allowLoopback: true, //允许回连
                    maxConnections: -1 //最大连接数（-1表示不限制）
                })
            }
        },
        initLine_Two(id, type) {
            const ins_Two = this.jsPlumb_Two;
            const elem = document.getElementById(id);
            if (type === 'center') {
                ins_Two.makeSource(elem, {
                    anchor: [1, 0.5, 0, 0], // 左 上 右 下
                    allowLoopback: true, //允许回连
                    maxConnections: -1 //最大连接数（-1表示不限制）
                })
                ins_Two.makeTarget(elem, {
                    anchor: [1, 0.5, 0, 0],
                    allowLoopback: true,
                    maxConnections: -1
                })
            } else {
                ins_Two.makeSource(elem, {
                    anchor: [0, 0.5, 0, 0], // 左 上 右 下
                    allowLoopback: true, //允许回连
                    maxConnections: -1 //最大连接数（-1表示不限制）
                })
                ins_Two.makeTarget(elem, {
                    anchor: [0, 0.5, 0, 0],
                    allowLoopback: true,
                    maxConnections: -1
                })
            }
        },
        setjsPlumb(sourceFlag, targetFlag){
            const source = document.getElementsByName('source')
            const center = document.getElementsByName('center')
            this.jsPlumb.setSourceEnabled(source, sourceFlag)
            this.jsPlumb.setTargetEnabled(center, targetFlag)
            this.jsPlumb.setDraggable(source, true) // 是否支持拖拽
            this.jsPlumb.setDraggable(center, true) // 是否支持拖拽
        },
        setjsPlumb_Two(sourceFlag, targetFlag){
            const center = document.getElementsByName('center')
            const right = document.getElementsByName('right')
            this.jsPlumb_Two.setSourceEnabled(center, sourceFlag)
            this.jsPlumb_Two.setTargetEnabled(right, targetFlag)
            this.jsPlumb_Two.setDraggable(center, true) // 是否支持拖拽
            this.jsPlumb_Two.setDraggable(right, true) // 是否支持拖拽
        },
        savelineRelation(){
            this.lineRelation = []
            var connections = this.jsPlumb.getAllConnections();
            console.log(connections);
            if (connections.length > 0) {
                for(var i in connections){
                    this.lineRelation.push({
                        start:connections[i].sourceId,
                        end:connections[i].targetId,
                    })
                }
            }
            if (this.jsPlumb_Two) {
                var connections_Two = this.jsPlumb_Two.getAllConnections();
            }
            console.log(connections_Two);
            if (connections_Two.length > 0) {
                for(var i in connections_Two){
                    this.lineRelation.push({
                        start:connections_Two[i].sourceId,
                        end:connections_Two[i].targetId,
                    })
                }
            }
            this.lineRelation.forEach((item,index)=>{
                if (!item.start && !item.end) {
                    this.lineRelation.splice(index,1)
                }
            })
        },
        startLine(){
            if (this.questionArry[this.currentQuestion].num === 3) {
                this.showPlumb()
                this.showPlumb_Two()
            }else{
                this.showPlumb()
                this.showPlumb_Two()
            }
            
        },
        resetLine(){
            if (this.jsPlumb !== null) {
                console.log(this.jsPlumb);
                this.jsPlumb.repaintEverything();
                this.jsPlumb.deleteEveryConnection() //删除所有连线
                this.jsPlumb.deleteEveryEndpoint()
                this.jsPlumb = null
            }
            if (this.jsPlumb_Two !== null) {
                this.jsPlumb_Two.repaintEverything();
                this.jsPlumb_Two.deleteEveryConnection()
                this.jsPlumb_Two.deleteEveryEndpoint()
                this.showPlumb_Two = null
            }
        },

        formatEntries() {
            // console.log(this.bsr.entries);
            this.bsr.entries.forEach(item => {
                if (item && item.quiz_type === 1) {
                    item.name = '判断题'
                    this.questionArry.push(item)
                    return item
                }
                item.answerOptions = []
                if (this.bsr && item && item.quiz_type !== 3) {
                    // console.log('item--------------',item);
                    item.name = '选择题'
                    if (item.option_images) {
                        item.option_images = item.option_images.split('|')
                        console.log(item.options);
                        item.options = item.options.split('|')
                        item.answerType = 'IMG'
                        item.option_images.map((v, i, arr) => {
                            let suffix = v.substr(-3, 1).toLowerCase() === 'j' ? '.bosj' : '.bosp'
                            item.answerOptions[i] = window.$DATADIR + `resc/Quiz/${this.bsr.id}/${v.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`
                        })
                    } else {
                        // console.log('item--------------',item);
                        item.answerType = 'TEXT'
                        item.options = item.options.replace(/[A-D]\.?/g, '')
                        item.answerOptions = item.options.split('|')
                    }
                    this.questionArry.push(item)
                }
                if (item && item.quiz_type === 3) {
                    var count = 0;
                    item.name = '连线题'
                    if (item.options_one) {
                        count++
                        if (item.options_one.indexOf('png') !== -1 || item.options_one.indexOf('jpg') !== -1 ) {
                            item.options_one_Type = 'IMG'
                            item.options_one = item.options_one.split('|')
                            item.options_one.map((v, i, arr) => {
                                let suffix = v.substr(-3, 1).toLowerCase() === 'j' ? '.bosj' : '.bosp'
                                item.options_one[i] = window.$DATADIR + `resc/Quiz/${this.bsr.id}/${v.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`
                            })
                        }else{
                            item.options_one = item.options_one.split('|')
                        }
                    }
                    if (item.options_two) {
                        count++
                        if (item.options_two.indexOf('png') !== -1 || item.options_two.indexOf('jpg') !== -1 ) {
                            item.options_two_Type = 'IMG'
                            item.options_two = item.options_two.split('|')
                            item.options_two.map((v, i, arr) => {
                                let suffix = v.substr(-3, 1).toLowerCase() === 'j' ? '.bosj' : '.bosp'
                                item.options_two[i] = window.$DATADIR + `resc/Quiz/${this.bsr.id}/${v.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`
                            })
                        }else{
                            item.options_two = item.options_two.split('|')
                        }
                    }
                    if (item.options_three) {
                        count++
                        if (item.options_three.indexOf('png') !== -1 || item.options_three.indexOf('jpg') !== -1 ) {
                            item.options_three_Type = 'IMG'
                            item.options_three = item.options_three.split('|')
                            item.options_three.map((v, i, arr) => {
                                let suffix = v.substr(-3, 1).toLowerCase() === 'j' ? '.bosj' : '.bosp'
                                item.options_three[i] = window.$DATADIR + `resc/Quiz/${this.bsr.id}/${v.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`
                            })
                        }else{
                            item.options_three = item.options_three.split('|')
                        }
                    }
                    item.num = count
                    // item.options_one.splice(1,4)
                    this.questionArry.push(item)
                }
            })
        },
        changeAnswer(index) {
            this.$set(this.answer, this.currentQuestion, index)
        },
        championship(num) {
            this.questionArry.forEach((item,index)=>{
                if (item.quiz_type ===3) {
                    this.questionArry.splice(index,1)
                }
            })
            this.$router.push({ name: 'championship', params: { questionArry: this.questionArry, id: this.bsr.id ,peopleNum:num} })
            // localStorage.setItem('question', JSON.stringify({ questionArry: this.questionArry, id: this.bsr.id, bsr: this.bsr }))
        },
        
        closeTips() {
            if (this.isRight && this.currentQuestion < this.bsr.entries.length - 1) {
                this.nextQuestion()
                return
            }
            if (this.lineisRight && this.currentQuestion < this.bsr.entries.length - 1) {
                this.showTips = false
                this.nextQuestion()
                return
            }
            this.showTips = false
        },
        prevQuestion() {
            if (this.questionArry[this.currentQuestion].quiz_type === 3) {
                // return
                this.resetLine()
                this.currentQuestion--
                setTimeout(() => {
                    if (this.questionArry[this.currentQuestion-1].quiz_type === 3) {
                        this.startLine()
                    }
                }, 100);
            }
            if (this.questionArry[this.currentQuestion].quiz_type !== 3) {
                this.setImgMaxScale()
                this.showTips = false
                if (this.currentQuestion <= 0) {
                    this.$message.warning('已经是第一题，没有上一题啦')
                    return
                }
                this.currentQuestion--
                this.setTextSizeAndTitleSize()
            }
        },
        nextQuestion() {
            if (this.questionArry[this.currentQuestion].quiz_type === 3 && this.questionArry[this.currentQuestion+1].quiz_type === 3) {
                if (this.lineisRight === false) {
                    this.$message.warning('请先提交答案')
                    return
                }
                this.resetLine()
                this.currentQuestion++
                setTimeout(() => {
                    this.startLine()
                }, 100);
            }
            if (this.questionArry[this.currentQuestion].quiz_type != 3 && this.questionArry[this.currentQuestion+1].quiz_type == 3) {
                this.currentQuestion++
                setTimeout(() => {
                    this.startLine()
                }, 100);
            }
            // if (this.questionArry[this.currentQuestion].quiz_type === 3) {
                // this.$message.warning('请先提交答案')
                // return
                // var Connections = this.questionArry[this.currentQuestion].num === 3 ? this.jsPlumb.getAllConnections().concat(this.jsPlumb_Two.getAllConnections()) : this.jsPlumb.getAllConnections()
                // console.log(Connections);
               
                // this.questionArry[this.currentQuestion].lineRelation.forEach(line=>{
                //     Connections.forEach(item=>{
                //         if ((line.start === item.sourceId && line.end === item.targetId) || (line.end === item.sourceId && line.start === item.targetId)){
                //             this.rightNum++
                //         }
                //     })
                // })
                // console.log(this.rightNum);
                // if (this.rightNum === this.questionArry[this.currentQuestion].lineRelation.length) {
                //     this.rightNum = 0
                //     this.currentQuestion++
                //     this.resetLine()
                //     setTimeout(() => {
                //         this.startLine()
                //     }, 100);
                //     console.log('right');
                // }else{
                //     this.rightNum = 0
                //     this.$message.warning('你未完成连线，无法提交')
                //     return
                // }  
            // }

            if (this.questionArry[this.currentQuestion].quiz_type !== 3) {
                this.showTips = false
                if (this.currentQuestion >= this.bsr.entries.length - 1) {
                    this.$message.warning('已经是最后一题，没有下一题啦啦')
                    return
                }
                if (this.answer[this.currentQuestion] === undefined) {
                    this.answer[this.currentQuestion] = -1
                }
                this.currentQuestion++
                this.setTextSizeAndTitleSize() 
            }
            
        },
        setTextSizeAndTitleSize() {
            if (this.questionArry[this.currentQuestion].quiz_type === 3) return
            // if (this.zoomArry[this.currentQuestion].titleSize > this.titleSize) return
            let oldTitleSize = this.zoomArry[this.currentQuestion].titleSize
            let oldTextSize = this.zoomArry[this.currentQuestion].textSize
            this.zoomArry[this.currentQuestion].titleSize = this.titleSize
            this.zoomArry[this.currentQuestion].textSize = this.textSize
            this.checkTitleAndOptions(oldTitleSize, oldTextSize)
        },
        submit() {
            if (this.questionArry[this.currentQuestion].quiz_type === 3) {
                var Connections = this.questionArry[this.currentQuestion].num === 3 ? this.jsPlumb.getAllConnections().concat(this.jsPlumb_Two.getAllConnections()) : this.jsPlumb.getAllConnections()
                console.log(Connections);
                this.rightNum = 0
                 this.questionArry[this.currentQuestion].lineRelation.forEach(line=>{
                    Connections.forEach(item=>{
                        if ((line.start === item.sourceId && line.end === item.targetId) || (line.end === item.sourceId && line.start === item.targetId)) {
                            this.rightNum++
                        }
                    })
                })
                console.log(this.rightNum);
                if (this.rightNum === this.questionArry[this.currentQuestion].lineRelation.length) {
                    this.rightNum = 0
                    this.showTips = true
                    this.isRight = false
                    this.lineisRight = true
                    // if(this.questionArry.length > 1){
                    //     this.resetLine()
                    //     setTimeout(() => {
                    //         this.startLine()
                    //     }, 100);
                    // }
                    console.log('right');
                }else{
                    this.rightNum = 0
                    this.$message.warning('你未完成连线，无法提交')
                    return
                }
                return
            }
            if (this.answer[this.currentQuestion] === undefined || this.answer[this.currentQuestion] === -1) {
                this.$message.warning('你还未选择答案呢')
                return
            }
            if (this.answer[this.currentQuestion] === this.questionArry[this.currentQuestion].answer) {
                this.showTips = true
                this.isRight = true
            } else {
                this.showTips = true
                this.isRight = false
                setTimeout(() => {
                    this.showTips = false
                }, 2000);
                this.$set(this.answer, this.currentQuestion, -1)
            }

        },
        changeToolPosition() {
            this.$refs.quizeTool.style.animation = 'showTool 1s ease forwards'
            this.$refs.quizeTool.addEventListener('animationend', function () {
                this.style.animation = ''
            })
            this.toolDirction === 'right' ? this.toolDirction = 'left' : this.toolDirction = 'right'
        },
        setImgMaxScale() {
            if (this.questionArry[this.currentQuestion].quiz_type === 3) {
                return
            }
            if (this.question.answerType === 'IMG' && this.maxScale === 1) {
                let containerX = this.$refs.imgAnwserContainer.getBoundingClientRect().x
                let { x, width } = this.$refs.scaleContainer.getBoundingClientRect()
                console.log(containerX, x, width / 10)
                this.maxScale = Math.floor((x - containerX) / width * 2 * 10) / 10 + 1
            }
        },
        zoomIn() {
            if (this.zoomArry[this.currentQuestion].titleSize >= this.signSize && this.question.answerType !== 'IMG') return
            if (!this.$refs.answer) {
                if (this.question.answerType === 'IMG') {
                    this.scale = this.scale + 0.05 >= this.maxScale ? this.maxScale : this.scale + 0.05
                }
                if (this.zoomArry[this.currentQuestion].titleSize < this.signSize) {
                    this.zoomArry[this.currentQuestion].titleSize <= this.signSize ? this.titleSize = ++this.zoomArry[this.currentQuestion].titleSize : ''
                    ++this.textSize
                }
            } else {
                this.titleSize = ++this.zoomArry[this.currentQuestion].titleSize
                this.textSize = ++this.zoomArry[this.currentQuestion].textSize
                this.checkTitleAndOptions()
            }
        },
        zoomOut() {
            if (this.titleSize <= this.signLowTitleSize) return
            this.zoomArry[this.currentQuestion].textSize ? this.textSize = --this.zoomArry[this.currentQuestion].textSize : --this.textSize
            this.titleSize = --this.zoomArry[this.currentQuestion].titleSize
            if (this.question.answerType === 'IMG') {
                this.scale = this.scale - 0.05 <= 1 ? 1 : this.scale - 0.05
            }
        },
        checkTitleAndOptions(oldTilteSzie, oldTextSize) {
            this.$nextTick(() => {
                let titleRect = this.$refs.title.getBoundingClientRect()
                let titleTopPosition = titleRect.top
                let quNameRect = this.$refs.quName.getBoundingClientRect()
                let quNamepPosition = quNameRect.height + quNameRect.top
                if (this.question.answerType === 'TEXT') {
                    let answerRect = this.$refs.answer.getBoundingClientRect()
                    let answerTopPostition = answerRect.height + answerRect.top
                    let submitTopPosition = this.$refs.submitBtn.getBoundingClientRect().top
                    if (quNamepPosition >= titleTopPosition || answerTopPostition >= submitTopPosition) {
                        if (oldTilteSzie) {
                            this.zoomArry[this.currentQuestion].titleSize = oldTilteSzie
                            this.zoomArry[this.currentQuestion].textSize = oldTextSize
                        } else {
                            this.titleSize = --this.zoomArry[this.currentQuestion].titleSize
                            this.textSize = --this.zoomArry[this.currentQuestion].textSize
                        }
                    }
                } else {
                    if (quNamepPosition >= titleTopPosition) {
                        if (oldTilteSzie) {
                            this.zoomArry[this.currentQuestion].titleSize = oldTilteSzie
                        }
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss">
#quiz {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-image: url(../../assets/img/echarts_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    .scale-container{
        transform-origin: top;
    }
    .showTips {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 100;
        img {
            width: 554px;
            height: 240px;
        }
    }
    .title-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 64px;
        background-image: url("../../assets/img/title_bg.png");
        background-size: cover;
        -webkit-app-region: drag;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        box-sizing: border-box;
        z-index: 98;
        .title-text {
          display: flex;
          align-items: center;
            img{
                margin-right: 8px;
                width: 20px;
                height: 20px;
            }
            span {
                font-size: 18px;
                color: #fff;
            }
        }
        .title-btns {
          -webkit-app-region: no-drag;
            img {
                width: 14px;
                height: 14px;
                margin-left: 18px;
                cursor: pointer;
            }
        }
    }
    .question {
        width: 100%;
        height: calc(100vh - 64px);
        overflow: hidden;
        position: relative;
        top: 64px;
        .question-index {
            position: absolute;
            color: #717171;
            top:4vh ;
            right: 5vw;
        }
        .inner-tools {
            img {
                width: 32px;
                height: 32px;
            }
            position: absolute;
            bottom: 3vh;
            right: 5vw;
        }
        .submit-btn {
            width: 11.8vw;
            height: 5.4vh;
            line-height: 5.4vh;
            text-align: center;
            color: #fff;
            background: rgba(72, 148, 255, 1);
            border-radius: 42px;
            bottom: 3.3vh;
            position: absolute;
            font-size: 1.4vw;
        }
        .question-type {
            width: 100%;
            height: 6.94vw;
            padding-bottom: 1.14vw;
            color: #daa130;
            font-size: 2.5vw;
        }
        .question-container {
            // flex: 1;
            width: 100%;
            font-size: 36px;
            color: #303133;
            .question-title {
                width: 1338px;
                padding: 0 auto;
                text-align: left;
                // text-indent: 2;
                font-weight: 400;
                margin: 5.9vh 0 ;
                height: 10vh;
                z-index: 99999!important;
            }

            .answer-options {
                box-sizing: border-box;
                .judgeQuestion , .selectQuestion{
                    margin-top: 8vh;
                    img{
                        width:12vw;
                    }
                }
                .threeRow{
                    grid-gap: 0px 118px;
                }
                .twoRow{
                    grid-gap: 0px 604px;
                }
                .ligature_box{
                    margin: 0 auto;
                    padding: 0;
                    box-sizing: border-box;
                    width:1338px;
                    height:604px;
                    display: grid;
                    grid-template-columns: repeat(3, 367px);
                    position: relative;
                    .options_one , .options_two , .options_three{
                        display: grid;
                        // grid-template-columns: repeat(1, 367px);
                    }
                    .optionsImg{
                        width: 282px;
                        height: 182px;
                        box-sizing: border-box;
                        padding: 0 !important;
                        border-radius: 4px;
                        img{
                            width: 100%;
                            height: 100%;
                            
                        }
                    }
                    .threePic{
                        grid-row-gap:29px;
                        grid-template-columns: repeat(1, 282px) ;
                    }
                    .twoPic{
                        grid-row-gap: 240px;
                        grid-template-columns: repeat(1, 282px) ;
                    }
                    .rightImg{
                        margin-left:85px
                    }
                    //中间列为图片时
                    .centerImg{
                        margin: 0 auto;
                    }
                    .optionsText{
                        width: 367px;
                        height: 79px;
                        box-sizing: border-box;
                        background-image: url(../../assets/img/optionsText_bg.png);
                        background-repeat: no-repeat;
                        background-size: cover;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1.3vw;
                    }
                    .length6{
                        grid-gap: 26px 0;
                    }
                    .length5{
                        grid-gap: 52.25px 0;;
                    }
                    .length4{
                        grid-gap: 96px 0;
                    }
                    .length3{
                        grid-gap: 183.5px 0;
                    }
                    .length2{
                        grid-gap: 446px 0;
                    }
                    .length1{
                        height: 79px;
                        margin-top: 262px;
                    }
                    // .option{
                    //     width: auto;
                    //     height: auto;
                    // }
                }
                .img-answer {
                    position: relative;
                    width: 14.84vw;
                    height: 14.84vw;
                    border-radius: 25px;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius:25px;
                    }
                    &:not(:last-child) {
                        margin-right: 3.44vw;
                    }
                    .answerText{
                        width:100%;
                        text-align:center;
                        margin-top:1vh;
                        color:#000000;
                        font-size: 2vw;
                    }
                }
                .current-answer {
                    position: absolute;
                    z-index: 99;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius:1.3vw;
                    img {
                        width: 3.89vw;
                        height: 3.89vw;
                    }
                }
                .text-container {
                    // padding: 0 25px;
                    width: 100%;
                }
                .text-answer {
                    // min-height: 12vw;
                    width: 69.7vw;
                    background: rgba(255, 255, 255, 1);
                    border: 1px solid rgba(221, 223, 231, 1);
                    border-radius: 8px;
                    font-size: 24px;
                    color: #606266;
                    margin-bottom: 2.33vh;
                    // display: flex;
                    // align-items: center;
                    .text-content {
                        // flex: 1;
                        min-height: 8vh;
                        width: 100%;
                        padding: 10px 2.43vw;
                        span{
                            line-height: 30px;
                            white-space: normal;
                            word-break: break-all;
                        }
                    }
                    @media screen and(max-width: 1920px) {
                        .text-content {
                            // flex: 1;
                            min-height: 5vh;
                            padding: 10px 2.43vw;
                        }
                    }
                }
                .answer-active {
                    background: rgba(72, 148, 255, 1);
                    color: #fff;
                }
                .judge {
                    &:first-child {
                        margin-right: 140px;
                    }
                }
            }
            @media screen and (min-width: 2049px) {
                .text-answer  , .question-title {
                    width: 1739.4px !important;
                }
                
                .threeRow{
                    grid-gap: 0px 153.4!important;
                }
                .twoRow{
                    grid-gap: 0px 785.2px!important;
                }
                .ligature_box{
                    width: 1739.4px!important;
                    height:785.2px!important;
                    grid-template-columns: repeat(3, 477.1px)!important;;
                    .optionsImg{
                        width: 366.6px!important;
                        height: 236.6px!important;
                    }
                    .threePic{
                        grid-row-gap:37.7px!important;
                        grid-template-columns: repeat(1, 366.6px)!important;
                    }
                    .twoPic{
                        grid-row-gap: 312px!important;
                        grid-template-columns: repeat(1, 366.6px)!important;
                    }
                    .rightImg{
                        margin-left: 110.5px!important;
                    }
                    .optionsText{
                        width: 477.1px!important;
                        height: 102.7px !important;
                    }
                    .length6{
                        grid-gap: 33.8px 0 !important;
                    }
                    .length5{
                        grid-gap: 67.6px 0 !important;
                    }
                    .length4{
                        grid-gap: 124.8px 0 !important;
                    }
                    .length3{
                        grid-gap: 238.55px 0 !important;
                    }
                    .length2{
                        grid-gap: 579.8px 0 !important;
                    }
                    .length1{
                        height: 102.7px !important;
                        margin-top: 340.6px!important;
                    }
                }
            }
            @media screen and (max-width: 1600px) {
                .text-answer  , .question-title {
                    width: 1070.4px!important;
                }
                .threeRow{
                    grid-gap: 0px 94.4px !important;
                }
                .twoRow{
                    grid-gap: 0px 483.2px !important;
                }
                .ligature_box{
                    width: 1070.4px!important;
                    height:483.2px!important;
                    box-sizing: border-box;
                    grid-template-columns: repeat(3, 293.6px) !important;;
                    .optionsImg{
                        width: 225.6px !important;
                        height: 145.6px !important;
                    }
                    .threePic{
                        grid-row-gap:23.2px!important;
                        grid-template-columns: repeat(1, 225.6px)!important;
                    }
                    .twoPic{
                        grid-row-gap: 192px!important;
                        grid-template-columns: repeat(1, 225.6px)!important;
                    }
                    .rightImg{
                        margin-left:68px!important;
                    }
                    .optionsText{
                        width: 294px!important;
                        height: 63.2px !important;
                    }
                    .length6{
                        grid-gap: 20.8px 0 !important;
                    }
                    .length5{
                        grid-gap: 41.6px 0 !important;
                    }
                    .length4{
                        grid-gap: 76.8px 0 !important;
                    }
                    .length3{
                        grid-gap: 146.8px 0 !important;
                    }
                    .length2{
                        grid-gap: 356.8px 0 !important;
                    }
                    .length1{
                        height: 63.2px !important;
                        margin-top: 209.6px!important;
                    }
                }
            }
            @media screen and (max-width: 1440px) {
                .quize-tool{
                    padding:6px 4px 4px!important;
                    img {
                        margin-bottom:6px!important;
                    }
                    .commitBtn{
                        font-size:12px!important;
                    }
                }
                .text-container{
                    transform:translateY(2vh)!important;
                }
                .text-answer  , .question-title {
                    width: 802.8px!important;
                }
                .threeRow{
                    grid-gap: 0px 70.8px !important;
                }
                .twoRow{
                    grid-gap: 0px 362.4px !important;
                }
                
                .ligature_box{
                    width: 802.8px!important;
                    height:362.4px !important;
                    grid-template-columns: repeat(3, 221px)!important;;
                    .optionsImg{
                        width: 169.2px!important;
                        height: 109.2px!important;
                    }
                    .threePic{
                        grid-row-gap:17.4px!important;
                        grid-template-columns: repeat(1, 169.2px)!important;
                        
                    }
                    .twoPic{
                        grid-row-gap: 144px!important;
                        grid-template-columns: repeat(1, 169.2px)!important;
                    }
                    .rightImg{
                        margin-left:51px!important;
                    }
                    .optionsText{
                        width: 221px!important;
                        height: 47.4px !important;
                    }
                    .length6{
                        grid-gap: 15.6px 0 !important;
                    }
                    .length5{
                        grid-gap: 31.2px 0 !important;
                    }
                    .length4{
                        grid-gap: 57.6px 0 !important;
                    }
                    .length3{
                        grid-gap: 110.1px 0 !important;
                    }
                    .length2{
                        grid-gap: 267.6px 0 !important;
                    }
                    .length1{
                        height: 47.4px!important;;
                        margin-top: 157.2px!important;;
                    }
                }
                // .submit{
                //     font-size: 12px!important;
                // }
                // .quize-tool{
                //     height: 28vh!important;;;
                // }
            }
        }
    }
    .animation-container {
        width: 54px;
        position: fixed;
        bottom: 23px;
        z-index: 200;
        .change-direction {
            position: absolute;
            top: 50%;
            width: 28px;
            height: 63px;
            transition: all 1s ease;
        }
        .change-direction-r {
            left: 1px;
            transform: translate(-100%, -50%);
        }
        .change-direction-l {
            right: 1px;
            transform: translate(100%, -50%) rotate(180deg);
        }
    }
    .bottom-toolkit {
        position: fixed;
        bottom: 50px;
        right: 50px;
        z-index: 100;
        img {
            width: 60px;
            height: 60px;
        }
    }
    .tool-container {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 60px;
        height: 180px;
        z-index: 2048;
    }
    .tool_text{
        width: 45px;
        height: 22px;
        font-size: 18px;
        font-weight: 400;
        color: #2A88F3;
        line-height: 34px;
        text-align: center;
        margin: 6px auto 3px auto;
        cursor: pointer;
    }
    .toolactive {
        background-image: url(../../assets/img/toolkit-bg.png);
        background-size: 100% 100%;
        height: 0;
        width: 48px;
        opacity: 0;
        overflow: hidden;
        img {
            width: 24px;
            height: 24px;
        }
    }
    .tool-animation-a {
        animation: showheight 1s ease forwards;
    }
    .tool-animation-na {
        animation: hiddenheight 1s ease forwards;
    }
    @keyframes showheight {
        form {
            height: 0;
        }
        to {
            opacity: 1;
            height: 150px;
        }
    }
    @keyframes hiddenheight {
        form {
            height: 150px;
            opacity: 1;
        }
        to {
            opacity: 0;
            height: 0;
        }
    }
    @keyframes showTool {
        from {
            opacity: 0;
            height: 0;
        }
        to {
            opacity: 1;
            height: 346px;
        }
    }
    

    .quize-tool {
        position: absolute;
        bottom: 1.5vh;
        right: 1vw;
        width: 3vw;
        height: auto;
        background-color: #888E99;
        border-radius: 6px;
        overflow: hidden;
        padding:  10px 4px 5px;
        .quize-tool-container {
            height: 100%;
        }

        img {
            width: 24px;
            height: 24px;
            margin-bottom: 1.4vh;
        }
        .quize-tool-space {
            width: 40px;
            height: 1px;
            background: rgba(44, 91, 138, 1);
            margin-bottom: 18px;
        }
        .tool-word {
            font-size: 14px;
            color: #dcdfe7;
            padding-bottom: 22px;
            &:hover {
                color: #4894ff;
            }
        }
        .commitBtn {
            width: calc(100% + 8px);
            height: 3.7vh;
            background: rgba(72, 148, 255, 1);
            border-radius: 4px;
            font-size: 14px;
            color: #dcdfe7;
        }
    }
}
    
</style>
